<!DOCTYPE html> 
<html>
	<head>
		<title>Sky Forms Pro</title>
		
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
		
		<link rel="stylesheet" href="css/demo.css">
		<link rel="stylesheet" href="css/font-awesome.css">
		<link rel="stylesheet" href="css/sky-forms.css">
		<!--[if lt IE 9]>
			<link rel="stylesheet" href="css/sky-forms-ie8.css">
		<![endif]-->
		
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.validate.min.js"></script>
		<script src="js/jquery.modal.js"></script>
		<!--[if lt IE 10]>
			<script src="js/jquery.placeholder.min.js"></script>
		<![endif]-->		
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
			<script src="js/sky-forms-ie8.js"></script>
		<![endif]-->
	</head>
	
	<body class="bg-cyan">
		<div class="body body-s">
			<div class="modal">Click <a href="#sky-form" class="modal-opener">here</a> to open modal form.</div>
		</div>
		
		<form action="" id="sky-form" class="sky-form sky-form-modal">
			<header>Login form</header>
			
			<fieldset>					
				<section>
					<div class="row">
						<label class="label col col-4">E-mail</label>
						<div class="col col-8">
							<label class="input">
								<i class="icon-append fa fa-user"></i>
								<input type="email" name="email" id="email">
							</label>
						</div>
					</div>
				</section>
				
				<section>
					<div class="row">
						<label class="label col col-4">Password</label>
						<div class="col col-8">
							<label class="input">
								<i class="icon-append fa fa-lock"></i>
								<input type="password" name="password" id="password">
							</label>
							<div class="note"><a href="#">Forgot password?</a></div>
						</div>
					</div>
				</section>
				
				<section>
					<div class="row">
						<div class="col col-4"></div>
						<div class="col col-8">
							<label class="checkbox"><input type="checkbox" name="checkbox-inline" checked><i></i>Keep me logged in</label>
						</div>
					</div>
				</section>
			</fieldset>
			<footer>
				<button type="submit" class="button">Log in</button>
				<a href="#" class="button button-secondary modal-closer">Close</a>
			</footer>
		</form>
		
		<script type="text/javascript">
			$(function()
			{
				// Validation
				$("#sky-form").validate(
				{					
					// Rules for form validation
					rules:
					{
						email:
						{
							required: true,
							email: true
						},
						password:
						{
							required: true,
							minlength: 3,
							maxlength: 20
						}
					},
										
					// Messages for form validation
					messages:
					{
						email:
						{
							required: 'Please enter your email address',
							email: 'Please enter a VALID email address'
						},
						password:
						{
							required: 'Please enter your password'
						}
					},					
					
					// Do not change code below
					errorPlacement: function(error, element)
					{
						error.insertAfter(element.parent());
					}
				});
			});			
		</script>
	</body>
</html>